<link rel="stylesheet" href="#(ctxPath)/static/layui/js/lay-module/dtree/dtree.css">
<link rel="stylesheet" href="#(ctxPath)/static/layui/js/lay-module/dtree/font/dtreefont.css">
<body>
<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">

        <div class="layui-row layui-col-space15">
            <div class="layui-col-md3">
                <ul id="selectTree" class="dtree" data-id="0"></ul>
            </div>
            <div class="layui-col-md9">
                <div style="height: 20px"></div>

                <div class="layui-form-item layui-form-pane">
                    <label class="layui-form-label" id="dataType">String</label>
                    <div class="layui-input-inline">
                        <input type="text" id="key" autocomplete="off" class="layui-input" disabled>
                    </div>
                    <label class="layui-form-label">TTL</label>
                    <div class="layui-input-inline">
                        <input type="text" id="ttl" autocomplete="off" class="layui-input" disabled>
                    </div>

                </div>
                <textarea id="data" class="layui-textarea" style="width: 700px; height: 400px"></textarea>

                <div style="height: 20px"></div>
            </div>
        </div>

    </div>
</div>

<span id="ctxPath" style="display: none">#(ctxPath)</span>
<!-- js部分 -->
<script>
    layui.use(['layer', 'table', 'laydate', 'form', 'dtree'], function () {
        var table = layui.table;
        var layer = layui.layer;
        var laydate = layui.laydate;
        var form = layui.form;
        var dtree = layui.dtree;

        var baseUrl = $("#ctxPath").text();

        // 修改角色对应的菜单
        var SelectTree = dtree.render({
            elem: "#selectTree",
            width: "100%", // 指定树的宽度
            url: '/monitor/cache/list',
            dataStyle: "layuiStyle",  //使用layui风格的数据格式
            response: {message: "msg", statusCode: 0},  //修改response中返回数据的定义
            dataFormat: "list",  //配置data的风格为list
            menubar: true,
            line: true,
            ficon: -1,
            none: "没有找到数据",
            initLevel: 1,
            skin: "zdy",  // laySimple主题风格
        });

        dtree.on("node(selectTree)", function (obj) {
            if (!obj.param.leaf) {
                var $div = obj.dom;
                SelectTree.clickSpread($div);  //调用内置函数展开节点
            } else {
                fetch(`${baseUrl}/monitor/cache/get?key=${obj.param.context}`, {
                    method: 'GET',
                    headers: {
                        "Content-Type": "application/x-www-form-urlencoded"
                    },
                }).then((res) => res.json()).then((data) => {
                    console.log(data)
                    $("#key").val(data.data.name)
                    $("#ttl").val(data.data.ttl)
                    $("#data").val(data.data.data)
                    $("#dataType").text(data.data.dataType)
                });
            }
        });

    });
</script>
</body>
